import { listInterfaceInfoByPageUsingPost } from '@/services/gek-api-backend/interfaceInfoController';
import { PageContainer } from '@ant-design/pro-components';
import { List, message } from 'antd';
import { useEffect, useState } from 'react';

const Index: React.FC = () => {
  const [loading, setLoading] = useState(false);
  const [list, setList] = useState<API.InterfaceInfo[]>([]);
  const [total, setTotal] = useState<number>(0);
  const loadData = async (current = 1, pageSize = 10) => {
    setLoading(true);
    // 获取接口列表
    await listInterfaceInfoByPageUsingPost({ current, pageSize })
      .then((res) => {
        setList(res?.data?.records ?? []);
        setTotal(res?.data?.total ?? 0);
        setLoading(false);
      })
      .catch((err) => {
        message.error(err.message);
      });
  };
  useEffect(() => {
    loadData();
  }, []);
  return (
    <PageContainer title="在线接口开放平台">
      <List
        className="demo-loadmore-list"
        loading={loading}
        itemLayout="horizontal"
        dataSource={list}
        pagination={{
          showTotal: (total) => `总共 ${total} 条`,
          onChange: (page, pageSize) => {
            loadData(page, pageSize);
          },
          total,
          onShowSizeChange: (current, size) => {
            loadData(current, size);
          },
        }}
        renderItem={(item) => (
          <List.Item
            actions={[
              <a key={item.id} href={`/detail/${item.id}`}>
                查看
              </a>,
            ]}
          >
            <List.Item.Meta
              title={<a href={`/detail/+${item.id}`}>{item.name}</a>}
              description={item.description}
            />
          </List.Item>
        )}
      />
    </PageContainer>
  );
};

export default Index;
